<script lang="tsx">
/**
 * 侧拉栏表单
 */
export default {
  name: "side-form"
}
</script>

<script lang="tsx" setup>
import SideFormManager from "./side-form-manager.ts"
import {ref, watch} from "vue"

/**
 * 定义props
 */
const props = defineProps<{
  sideFormModel: SideFormManager;
}>()

/**
 * 侧拉栏模型
 */
const sideFormModel = ref<SideFormManager>()

/**
 * 可视性
 */
const visible = ref(false)

/**
 * 显示
 */
const show = () => {
  visible.value = true
}

/**
 * 关闭
 */
const close = () => {
  visible.value = false
}

/**
 * 监听
 */
watch(() => props.sideFormModel, function (newValue: any) {
  if (newValue) {
    sideFormModel.value = newValue
  }
}, {
  deep: true,
  immediate: true
})

/**
 * 暴露
 */
defineExpose({
  show,
  close
})
</script>

<template>
  <div class="side-form" v-if="sideFormModel">
    <el-drawer 
      v-model="visible" 
      :before-close="close" 
      :title="sideFormModel?.title || '表单'"
      :size="sideFormModel.width"
      destroy-on-close
    >
      <slot name="default"></slot>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped></style>